<template>
  <div class="right_echarts" ref="echarts_right">

  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue"
const echarts_right = ref()
const color = ['#975fe4', '#45a5ff', '#81c926', '#7585a2', '#fad337', '#f2637b', '#ff8e49', '#37cbcb', '#FFD3A8']

const dataSource = [
  { name: '01.广州市', value: 5080 },
  { name: '02.深圳市', value: 5036 },
  { name: '03.珠海市', value: 5000 },
  { name: '04.东莞市', value: 3500 },
  { name: '05.惠州市', value: 3000 },
  { name: '06.汕尾市', value: 2800 },
  { name: '07.揭阳市', value: 2400 },
];

let dataSourcemax = 0;
dataSource.forEach((item) => {
  dataSourcemax += item.value;
});

// let salvProMax = [dataSourcemax, dataSourcemax, dataSourcemax, dataSourcemax, dataSourcemax, dataSourcemax, dataSourcemax, dataSourcemax, dataSourcemax]
let salvProMax = [6000, 6000, 6000, 6000, 6000, 6000, 6000]



const init = () => {
  let myCharts1 = echarts.init(echarts_right.value);
  let option = ref({
    title:{
      show:false,
      text:'各项目建设单位资金使用排行榜',
      textStyle:{
        color:'white'
      },
      left:'20%',
    },
    grid: [
      {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        containLabel: true,
      },
    ],
    xAxis: [
      {
        gridIndex: 0,
        type: 'value',
        axisLabel: { show: false },
        axisLine: { show: false },
        splitLine: { show: false },
        axisTick: { show: false },
      },
      {
        gridIndex: 0,
        type: 'value',
        max: 100,
        axisLabel: { show: false },
        axisLine: { show: false },
        splitLine: { show: false },
        axisTick: { show: false },
      },
    ],
    yAxis: [
      {
        gridIndex: 0,
        type: 'category',
        inverse: true,
        data: dataSource.map((item) => item.name),
        axisTick: { show: false },
        axisLine: { show: false },
        splitLine: { show: false },
        position: 'left',
        axisLabel: {
          width: 100,
          padding: [0, 0, 0, -50],
          align: 'left',
          formatter: (name, index) => {
            return `{value|${name}}`;
          },
          rich: {
            value: {
              color: '#fff',
              fontSize: 12,
              fontWeight: 500,
            },
          },
        },
      },
    ],
    series: [
      {
        z: 1,
        type: 'bar',
        xAxisIndex: 0,
        yAxisIndex: 0,
        barWidth: 20,
        data: dataSource.map((item) => item.value),
        silent: true,
        itemStyle: {
          emphasis: {
            barBorderRadius: [0, 20, 20, 0],
          },
          normal: {
            // barBorderRadius: [0, 20, 20, 0],
            barBorderRadius: [30, 30, 30, 30],
            color: function (params) {
              return color[params.dataIndex]
            },
            // 柱状图上显示数字
            label: {
              show: true, // 开启显示
              position: 'insideRight', // 在上方显示
              offset: [0, 0], //  5以上用水平垂直 
              textStyle: {
                // 数值样式
                fontSize: 14,
                color: '#fff',
                fontWeight: 500,
                // padding: [0, 0, 0, 0], // 5以上版本无效
              },
            },
          },
        },
      },
      {
        z: 3,
        name: '背景',
        type: 'bar',
        barWidth: 20,
        barGap: '-100%',
        data: salvProMax,
        itemStyle: {
          normal: {
            color: function (params) {
              return color[params.dataIndex]
            },
            opacity: 0.3,
            barBorderRadius: [30, 30, 30, 30],
          },
        },
      },
    ],
  })

  myCharts1.setOption(option.value);
  window.addEventListener("resize", function () {
    myCharts1.resize();
  });
}

onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.right_echarts {
  width: 100%;
  height: 100%;
}
</style>